<template>
	<view class="index-warp">
		<view class="top-bg">
			<view class="status"></view>
			<view class="navVue">
				<view style="width: 42rpx; height: 42rpx;"></view>
				<view class="nav-title">独角兽量化</view>
				<image src="../../static/imgs/news.png" style="width: 42rpx; height: 42rpx;" @click="goNews()"></image>
			</view>
		</view>

		<view class="place"></view>

		<scroll-view scroll-y="true" class="scrollVue">
			<view class="banner-wrap">
				<swiper class="banner-swiper" circular :interval="3000" indicator-dots :autoplay="true">
					<swiper-item v-for="(item, index) in swiperlist" :key="item.id">
						<view class="swiper-item">
							<image :src="item.path" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="grid-wrap">
			  <div
			    class="grid-item"
			    v-for="item in gridList"
			    :key="item.indicator"
			    @click="toGrid(item.url, item)"
			  >
			    <image :src="item.imgSrc" mode="widthFix"></image>
			    <p>{{ item.info }}</p>
			  </div>
			</view>

			<view class="one-key-wrap" @click="goto()">
			   <image src="../../static/imgs/index/one-click.png" ></image>
			</view>

			<view class="title">{{ $t("交易播报") }}</view>
			<view class="broadcast-wrap">
			  <view class="list-wrap">
			    <view class="list-title">
			      <view class="title-item" v-for="item in titleList" :key="item.id">
			        {{ item.value }}
			      </view>
			    </view>
			    <view>
			      <view
			        v-for="(item, index) in incomeList"
			        :key="index"
			        class="list-item"
			        @click="toIncomeDetail()"
			      >
			        <view class="user">
			          {{ item.userName.replace(/^(\S{3})\S+(\S{3})$/, "$1…$2") }}
			        </view>
			        <view class="currencyPair">
			          {{ item.currencyName }}
			        </view>
			        <view class="profit">
			          {{ item.profit.toFixed(2) }}
			        </view>
			        <view class="time">
			          {{ item.createTime.slice(11) }}
			        </view>
			      </view>
			    </view>
			  </view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      swiperlist: [],
      src: "../../static/imgs/index/notice.png",
      noticeList: [],
	  timer: null,
      incomeList: [],
    };
  },
  computed: {
    gridList() {
      return [
        {
          imgSrc: "/static/imgs/index/share.png",
          info: this.$t("分享链接"),
          url: "/pages/index/share",
          isNeedToken: true,
        },
        {
          imgSrc: "/static/imgs/index/register.png",
          info: this.$t("操作流程"),
          url: "/pages/login/registration-course",
          isNeedToken: false,
        },
        {
          imgSrc: "/static/imgs/index/app.png",
          info: this.$t("API教程"),
          url: "/pages/login/app-course",
          isNeedToken: false,
        },
        {
          imgSrc: "/static/imgs/index/api.png",
          info: this.$t("API接口"),
          url: "/pages/index/app-port",
          isNeedToken: true,
        },
      ];
    },
    oneKeyList() {
      return [
        {
          imgSrc: "/static/imgs/index/xh.png",
          info: this.$t("一键开启现货量化"),
          url: "",
          isNeedToken: true,
        },
        // {
        // 	imgSrc: "/static/imgs/index/hy.png",
        // 	info: "开启合约量化",
        // 	url: "", //pages/activate/contract
        // 	isNeedToken: true
        // },
      ];
    },
    titleList() {
      return [
        {
          id: 1,
          value: this.$t("用户"),
        },
        {
          id: 2,
          value: this.$t("币对"),
        },
        {
          id: 3,
          value: this.$t("量化收益"),
        },
        {
          id: 4,
          value: this.$t("时间"),
        },
      ];
    },
  },
  onLoad() {
    // #ifdef APP-PLUS
    // this.getAppInfo();
    // #endif
    this.getNoticeList();
    this.getSwiperList();
    this.getUserBaseInfo();
	this.getEarnings();
  },
  onHide() {
	  console.log("onHide")
  	if(this.timer) {
  		clearInterval(this.timer)
  		this.timer = null
  	}
  },
  onShow() {
    this.switchTabLang();
	this.timer = setInterval(()=>{
		this.getEarnings();
	},20000)
  },
  methods: {
    getAppInfo() {
      plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
        this.version = wgtinfo.versionCode;
      });

      this.androidCheckUpdate(); // app中检测版本更新
    },
	goNews(){
		uni.navigateTo({
			url: "/pages/index/notice"
		})
	},
	goto(){
		uni.switchTab({
			url: "/pages/index/futures"
		})
	},
    androidCheckUpdate() {
      let _this = this;
      this.$http.post(`/search/appVersion`).then((res) => {
        if (res.code === 0) {
          if (res.obj?.appVersion !== this.version) {
            // 如果最新版本大于现在已经安装的App的版本
            // 新建下载任务
            uni.showLoading({
              title: "app版本升级中，请稍后",
            });
            uni.downloadFile({
              url: res.obj?.appAddress,
              success: (res) => {
                if (res.statusCode === 200) {
                  plus.runtime.install(
                    res.tempFilePath,
                    {},
                    function () {
                      plus.nativeUI.alert(
                        "升级完成，请点击确定对App进行重启！",
                        function () {
                          plus.runtime.restart(); // 安装成功后重启
                        }
                      );
                      console.log("success");
                      uni.hideLoading();
                    },
                    function (error) {
                      console.log(error.message);
                      uni.hideLoading();
                      uni.showToast({
                        title: "安装失败",
                        duration: 1500,
                      });
                    }
                  );
                  console.log("下载成功");
                }
              },
            });
            // var dtask = plus.downloader.createDownload(
            // 	res.obj?.appAddress, {
            // 		force: true,
            // 	},
            // 	function(d, status) {
            // 		// 下载完成
            // 		if (status == 200) {
            // 			uni.showModal({
            // 				title: "下载完成，即将安装",
            // 				showCancel: false,
            // 				success: () => {
            // 					// 由于install只能安装本地的地址，所以先把下载的地址在本地找到，再调用install
            // 					plus.runtime.install(
            // 						plus.io.convertLocalFilesSystemURL(d.filename), {},
            // 						function() {
            // 							console.log("success");
            // 							plus.runtime.restart(); // 安装成功后重启
            // 						},
            // 						function(error) {
            // 							console.log(error.message);
            // 							uni.showToast({
            // 								title: "安装失败",
            // 								duration: 1500,
            // 							});
            // 						}
            // 					);
            // 				},
            // 			});
            // 		} else {
            // 			uni.showToast({
            // 				title: "更新失败",
            // 				duration: 1500,
            // 			});
            // 		}
            // 	}
            // );
            dtask.start();
          } else {
            //如果是最新版本了，进入首页就会提示一下，建议屏蔽掉
            uni.hideLoading();
            uni.showModal({
              title: "当前已是最新版本",
              showCancel: false,
            });
          }
        }
      });
    },
    // 获取用户状态
    getUserBaseInfo() {
      this.$http
        .post(`/front/user/baseInfo`)
        .then((res) => {
          if (res) {
            this.userInfo = res.obj.user;
            uni.setStorageSync("apiStatus", res.obj.apiStatus);
            this.profit = res.obj.profit;

            if (res.obj.contractActive) {
              this.oneKeyList[0].url = "/pages/set/strategy-set";
            } else {
              this.oneKeyList[0].url = "/pages/activate/spotGoods";
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取首页轮播图
    getNoticeList() {
      this.$http.post("/search/indexContent").then((res) => {
        this.noticeList = res.obj.contentList;
      });
    },
    // 获取首页轮播
    getSwiperList() {
      this.$http.post("/search/indexSlides").then((res) => {
        this.swiperlist = res.obj;
      });
    },
    // 收益播报
    getEarnings() {
		console.log("bbbbbbbbbbbbbbbb")
      this.$http.post("/search/profitLog").then((res) => {
        this.incomeList = res.obj;
      });
    },
    toNotice() {
      uni.navigateTo({
        url: "/pages/index/notice",
      });
    },
    toGrid(url, item) {
      if (!url) return;
      uni.navigateTo({
        url: url,
      });
    },
    toIncomeDetail() {
      // uni.navigateTo({
      // 	url: "/pages/index/income",
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.index-warp {
	width: 100%;
	height: 100%;
	background: url("../../static/imgs/bg.png") no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	position: fixed;
	.top-bg {
		width: 100%;
		background: #fff;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		.status {
			width: 100%;
			height: var(--status-bar-height);
			background-color: #fff;
		}
		.navVue {
			width: 100%;
			height: 92rpx;
			background: linear-gradient(to right, #FFFBFF, #FFE7F4);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
			.nav-title {
				width: 420rpx;
				height: 92rpx;
				font-size: 36rpx;
				color: #04094C;
				text-align: center;
				line-height: 92rpx;
			}
		}
	}

	.place {
		height: calc(var(--status-bar-height) + 92rpx);
	}

	.scrollVue {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 112rpx - var(--window-bottom) - var(--window-top));
		margin-top: 0;
	}

	.banner-wrap {
		width: 690rpx;
		height: 300rpx;
		margin: 0 auto;
		.banner-swiper {
			width: 100%;
			height: 300rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100% !important;
				}
			}

			::v-deep .uni-swiper-dots {
				position: absolute;
				.uni-swiper-dot {
					width: 10rpx;
					height: 10rpx;
					background: #5b76ff;
					border-radius: 5rpx;
				}
				.uni-swiper-dot-active {
					width: 28rpx;
				}
			}
		}
	}


	.grid-wrap {
		width: 690rpx;
		height: 250rpx;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		.grid-item {
			width: 20%;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 86rpx;
				height: 86rpx;
			}

			p {
				width: 100%;
				text-align: center;
				margin-top: 36rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.one-key-wrap {
		width: 690rpx;
		height: 120rpx;
		margin: 0 auto;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		font-size: 32rpx;
		color: #04094C;
		line-height: 1;
		padding: 30rpx;
	}

	.broadcast-wrap {
		width: 690rpx;
		background: #FFFAFC;
		border-radius: 20rpx;
		margin: 0 auto;
		box-sizing: border-box;
		color: $uni-text-color-inverse;
		font-family: PingFang SC;
		display: flex;
		flex-direction: column;


		.list-wrap {
			width: 100%;

			.list-title {
				width: 100%;
				display: flex;
				align-items: center;
				height: 60rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #9F8C91;
				padding: 0 20rpx;
				box-sizing: border-box;
				background: #FFE3F0;
				.title-item {
					width: 25%;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
				}
				.title-item:nth-child(1) {
					text-align: left;
				}

				.title-item:nth-last-child(1) {
					text-align: right;
				}
			}

			.list-item {
				height: 60rpx;
				line-height: 60rpx;
				width: 100%;
				display: flex;
				flex-direction: row;

				view {
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #333;
				}

				.user {
					width: 25%;
				}

				.currencyPair {
					width: 25%;
					text-align: center;
				}

				.profit {
					width: 25%;
				}

				.time {
				  width: 25%;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
				}
			}
		}
	}
}
</style>
